<template>
  <div class="page-container">
    <div class="home-content">
      <!-- 轮播图部分 -->
      <div class="banner-section card">
        <el-carousel height="400px">
          <el-carousel-item v-for="item in banners" :key="item.id">
            <div class="banner-item" :style="{ backgroundImage: `url(${item.image})` }">
              <div class="banner-content">
                <h2>{{ item.title }}</h2>
                <p>{{ item.description }}</p>
                <el-button type="primary" class="btn-primary" @click="handleBannerClick(item)">
                  了解更多
                </el-button>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 数据统计部分 -->
      <div class="stats-section">
        <el-row :gutter="20">
          <el-col :span="6" v-for="stat in statistics" :key="stat.title">
            <div class="stat-card card">
              <el-icon class="stat-icon" :class="stat.color">
                <component :is="stat.icon" />
              </el-icon>
              <div class="stat-info">
                <h3>{{ stat.value }}</h3>
                <p>{{ stat.title }}</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 推荐课程部分 -->
      <div class="recommend-section">
        <div class="section-header">
          <h2 class="page-title">推荐课程</h2>
          <el-button type="primary" class="btn-primary" @click="$router.push('/course/list')">
            查看全部
          </el-button>
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="course in recommendCourses" :key="course.id">
            <div class="course-card card" @click="goToCourse(course.id)">
              <div class="course-image">
                <img :src="course.img" :alt="course.title">
                <div class="course-tag" v-if="course.isNew">新课</div>
              </div>
              <div class="course-content">
                <h3>{{ course.title }}</h3>
                <p class="course-desc">{{ course.desc }}</p>
                <div class="course-info">
                  <span class="teacher">
                    <el-icon><User /></el-icon>
                    {{ course.teacher }}
                  </span>
                  <div class="course-meta">
                    <span class="students">
                      <el-icon><UserFilled /></el-icon>
                      {{ course.students }}人学习
                    </span>
                    <span class="rating">
                      <el-icon><Star /></el-icon>
                      {{ course.rating }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 课程分类部分 -->
      <div class="category-section">
        <h2 class="page-title">课程分类</h2>
        <el-row :gutter="20">
          <el-col :span="6" v-for="category in categories" :key="category.id">
            <div class="category-card card">
              <div class="category-icon" :class="category.color">
                <el-icon :size="32">
                  <component :is="category.icon" />
                </el-icon>
              </div>
              <h3>{{ category.name }}</h3>
              <p>{{ category.count }}门课程</p>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 热门讲师部分 -->
      <div class="teacher-section">
        <div class="section-header">
          <h2 class="page-title">热门讲师</h2>
          <el-button type="primary" class="btn-primary" @click="$router.push('/teacher')">
            查看全部
          </el-button>
        </div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="teacher in hotTeachers" :key="teacher.id">
            <div class="teacher-card card">
              <div class="teacher-avatar">
                <img :src="teacher.avatar" :alt="teacher.name">
                <div class="teacher-tag" v-if="teacher.isNew">新加入</div>
              </div>
              <div class="teacher-info">
                <h3>{{ teacher.name }}</h3>
                <p class="teacher-title">{{ teacher.title }}</p>
                <div class="teacher-stats">
                  <span>
                    <el-icon><VideoPlay /></el-icon>
                    {{ teacher.courses.length }}门课程
                  </span>
                  <span>
                    <el-icon><UserFilled /></el-icon>
                    {{ teacher.students }}位学员
                  </span>
                </div>
                <el-button type="primary" class="btn-primary" @click="viewTeacher(teacher.id)">
                  查看主页
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 最新动态部分 -->
      <div class="news-section">
        <div class="section-header">
          <h2 class="page-title">最新动态</h2>
          <el-button type="primary" class="btn-primary" @click="$router.push('/news')">
            更多动态
          </el-button>
        </div>
        <el-row :gutter="20">
          <el-col :span="12" v-for="news in latestNews" :key="news.id">
            <div class="news-card card">
              <div class="news-image">
                <img :src="news.image" :alt="news.title">
              </div>
              <div class="news-content">
                <div class="news-tag" :class="news.type">{{ news.typeText }}</div>
                <h3>{{ news.title }}</h3>
                <p>{{ news.summary }}</p>
                <div class="news-meta">
                  <span class="time">
                    <el-icon><Clock /></el-icon>
                    {{ news.time }}
                  </span>
                  <span class="views">
                    <el-icon><View /></el-icon>
                    {{ news.views }}次浏览
                  </span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { 
  User, UserFilled, Star, 
  Reading, VideoPlay, 
  Monitor, DataAnalysis, 
  Connection, Collection,
  Clock, View,
  Brush, Code, DataLine,
  ChatDotRound
} from '@element-plus/icons-vue'

const router = useRouter()

// 轮播图数据
const banners = ref([
  {
    id: 1,
    title: '开启你的编程之旅',
    description: '从零开始，系统学习编程知识',
    image: 'https://picsum.photos/1200/400?random=1'
  },
  {
    id: 2,
    title: 'AI 与数据科学',
    description: '探索人工智能的奥秘',
    image: 'https://picsum.photos/1200/400?random=2'
  },
  {
    id: 3,
    title: 'UI/UX 设计',
    description: '打造优秀的用户体验',
    image: 'https://picsum.photos/1200/400?random=3'
  }
])

// 数据统计
const statistics = ref([
  {
    title: '课程总数',
    value: '12',
    icon: 'Reading',
    color: 'blue'
  },
  {
    title: '学习人数',
    value: '10,000+',
    icon: 'UserFilled',
    color: 'green'
  },
  {
    title: '讲师数量',
    value: '10',
    icon: 'Connection',
    color: 'orange'
  },
  {
    title: '项目实战',
    value: '50+',
    icon: 'DataLine',
    color: 'red'
  }
])

// 推荐课程
const recommendCourses = ref([
  {
    id: 1,
    title: 'Vue3 实战教程',
    desc: '从入门到精通，掌握Vue3开发技能',
    teacher: '张老师',
    img: 'https://picsum.photos/400/300?random=1',
    students: 1234,
    rating: 4.9,
    isNew: true,
    content: '本课程将带你深入学习Vue3的核心概念和最佳实践，包括组合式API、响应式系统、组件开发等。通过实战项目，掌握Vue3的开发技能。'
  },
  {
    id: 2,
    title: 'React 18 新特性详解',
    desc: '深入学习React 18的新特性和最佳实践',
    teacher: '李老师',
    img: 'https://picsum.photos/400/300?random=2',
    students: 2345,
    rating: 4.8,
    isNew: true,
    content: '本课程将详细介绍React 18的新特性，包括并发渲染、自动批处理、Suspense等。通过实例讲解，帮助你快速掌握React 18的开发技巧。'
  },
  {
    id: 3,
    title: 'Node.js 企业级应用开发',
    desc: '从零开始构建企业级Node.js应用',
    teacher: '王老师',
    img: 'https://picsum.photos/400/300?random=3',
    students: 3456,
    rating: 4.7,
    content: '本课程将教你如何使用Node.js构建企业级应用，包括Express框架、数据库设计、RESTful API开发、性能优化等内容。'
  }
])

// 课程分类
const categories = ref([
  {
    id: 1,
    name: '前端开发',
    icon: 'Monitor',
    color: 'blue',
    count: 3
  },
  {
    id: 2,
    name: '后端开发',
    icon: 'Code',
    color: 'green',
    count: 4
  },
  {
    id: 3,
    name: 'UI设计',
    icon: 'Brush',
    color: 'orange',
    count: 1
  },
  {
    id: 4,
    name: '人工智能',
    icon: 'DataLine',
    color: 'purple',
    count: 1
  }
])

// 热门讲师
const hotTeachers = ref([
  {
    id: 1,
    name: '张教授',
    title: '资深前端架构师',
    avatar: 'https://picsum.photos/200/200?random=1',
    courses: 12,
    students: 5000,
    isNew: true,
    description: '10年前端开发经验，Vue.js核心贡献者，擅长前端架构设计',
    courses: [
      {
        id: 1,
        title: 'Vue3 实战教程',
        desc: '从入门到精通，掌握Vue3开发技能',
        img: 'https://picsum.photos/400/300?random=1',
        students: 1234,
        rating: 4.9
      },
      {
        id: 2,
        title: '前端工程化实践',
        desc: '深入理解前端工程化，提升开发效率',
        img: 'https://picsum.photos/400/300?random=2',
        students: 2345,
        rating: 4.8
      }
    ]
  },
  {
    id: 2,
    name: '李老师',
    title: '全栈开发专家',
    avatar: 'https://picsum.photos/200/200?random=2',
    courses: 15,
    students: 8000,
    description: '8年全栈开发经验，精通Node.js和微服务架构',
    courses: [
      {
        id: 3,
        title: 'Node.js 企业级应用开发',
        desc: '从零开始构建企业级Node.js应用',
        img: 'https://picsum.photos/400/300?random=3',
        students: 3456,
        rating: 4.7
      },
      {
        id: 4,
        title: '微服务架构实战',
        desc: '掌握微服务架构设计与实现',
        img: 'https://picsum.photos/400/300?random=4',
        students: 4567,
        rating: 4.8
      }
    ]
  },
  {
    id: 3,
    name: '王老师',
    title: 'React技术专家',
    avatar: 'https://picsum.photos/200/200?random=3',
    courses: 8,
    students: 3000,
    description: 'React技术专家，曾就职于知名互联网公司',
    courses: [
      {
        id: 5,
        title: 'React 18 新特性详解',
        desc: '深入学习React 18的新特性和最佳实践',
        img: 'https://picsum.photos/400/300?random=5',
        students: 2345,
        rating: 4.8
      },
      {
        id: 6,
        title: 'React性能优化实战',
        desc: '提升React应用性能的关键技巧',
        img: 'https://picsum.photos/400/300?random=6',
        students: 3456,
        rating: 4.7
      }
    ]
  },
  {
    id: 4,
    name: '赵老师',
    title: 'Node.js技术专家',
    avatar: 'https://picsum.photos/200/200?random=4',
    courses: 10,
    students: 6000,
    description: 'Node.js技术专家，开源项目贡献者',
    courses: [
      {
        id: 7,
        title: 'Express.js 实战教程',
        desc: '使用Express.js构建Web应用',
        img: 'https://picsum.photos/400/300?random=7',
        students: 4567,
        rating: 4.6
      },
      {
        id: 8,
        title: 'MongoDB数据库设计',
        desc: 'NoSQL数据库设计与优化',
        img: 'https://picsum.photos/400/300?random=8',
        students: 5678,
        rating: 4.7
      }
    ]
  }
])

// 最新动态
const latestNews = ref([
  {
    id: 1,
    title: 'Vue3.3新特性发布，带来更多开发便利',
    summary: 'Vue3.3版本带来了多项新特性，包括更好的TypeScript支持、更强大的组件API等...',
    image: 'https://picsum.photos/400/200?random=5',
    type: 'tech',
    typeText: '技术动态',
    time: '2小时前',
    views: 1234
  },
  {
    id: 2,
    title: '2024年最值得学习的编程语言TOP10',
    summary: '根据最新的技术趋势和就业市场需求，我们为您整理了2024年最值得学习的编程语言...',
    image: 'https://picsum.photos/400/200?random=6',
    type: 'guide',
    typeText: '学习指南',
    time: '5小时前',
    views: 2345
  }
])

function handleBannerClick(banner) {
  // 处理轮播图点击
  console.log('Banner clicked:', banner)
}

function goToCourse(id) {
  const course = recommendCourses.value.find(c => c.id === id)
  if (course) {
    router.push({
      path: `/course/${id}`,
      query: {
        title: course.title,
        content: course.content,
        teacher: course.teacher,
        img: course.img,
        students: course.students,
        rating: course.rating
      }
    })
  }
}

function viewTeacher(id) {
  const teacher = hotTeachers.value.find(t => t.id === id)
  if (teacher) {
    router.push({
      path: `/teacher/${id}`,
      query: {
        name: teacher.name,
        title: teacher.title,
        avatar: teacher.avatar,
        description: teacher.description,
        courses: JSON.stringify(teacher.courses),
        students: teacher.students
      }
    })
  }
}
</script>

<style scoped>
.home-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  z-index: 1;
}

.banner-section {
  margin-bottom: 30px;
  overflow: hidden;
}

.banner-item {
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}

.banner-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
}

.banner-content {
  position: absolute;
  bottom: 60px;
  left: 60px;
  color: white;
  max-width: 500px;
}

.banner-content h2 {
  font-size: 36px;
  margin-bottom: 16px;
}

.banner-content p {
  font-size: 18px;
  margin-bottom: 24px;
  opacity: 0.9;
}

.stats-section {
  margin-bottom: 40px;
}

.stat-card {
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  font-size: 40px;
  padding: 16px;
  border-radius: 12px;
}

.stat-icon.blue {
  color: var(--primary-color);
  background: rgba(79, 172, 254, 0.1);
}

.stat-icon.green {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.1);
}

.stat-icon.orange {
  color: #e6a23c;
  background: rgba(230, 162, 60, 0.1);
}

.stat-icon.red {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.1);
}

.stat-info h3 {
  font-size: 24px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.stat-info p {
  color: var(--text-secondary);
  margin: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.recommend-section {
  margin-bottom: 40px;
}

.course-card {
  cursor: pointer;
}

.course-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-duration) ease;
}

.course-card:hover .course-image img {
  transform: scale(1.05);
}

.course-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #f56c6c;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.course-content {
  padding: 20px;
}

.course-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text-primary);
}

.course-desc {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-meta {
  display: flex;
  gap: 12px;
  color: var(--text-light);
  font-size: 14px;
}

.course-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.category-section {
  margin-bottom: 40px;
}

.category-card {
  padding: 24px;
  text-align: center;
}

.category-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-icon.blue {
  color: var(--primary-color);
  background: rgba(79, 172, 254, 0.1);
}

.category-icon.green {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.1);
}

.category-icon.orange {
  color: #e6a23c;
  background: rgba(230, 162, 60, 0.1);
}

.category-icon.purple {
  color: #8e44ad;
  background: rgba(142, 68, 173, 0.1);
}

.category-card h3 {
  margin: 0 0 8px;
  color: var(--text-primary);
}

.category-card p {
  margin: 0;
  color: var(--text-secondary);
}

.teacher-section {
  margin-bottom: 40px;
}

.teacher-card {
  padding: 20px;
  text-align: center;
}

.teacher-avatar {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
}

.teacher-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.teacher-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: #f56c6c;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.teacher-info h3 {
  margin: 0 0 8px;
  color: var(--text-primary);
}

.teacher-title {
  color: var(--text-secondary);
  margin: 0 0 16px;
  font-size: 14px;
}

.teacher-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  color: var(--text-light);
  font-size: 14px;
}

.teacher-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.news-section {
  margin-bottom: 40px;
}

.news-card {
  display: flex;
  gap: 20px;
  padding: 20px;
  cursor: pointer;
}

.news-image {
  width: 200px;
  height: 120px;
  flex-shrink: 0;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.news-content {
  flex: 1;
  position: relative;
}

.news-tag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.news-tag.tech {
  background: rgba(79, 172, 254, 0.1);
  color: var(--primary-color);
}

.news-tag.guide {
  background: rgba(103, 194, 58, 0.1);
  color: #67c23a;
}

.news-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text-primary);
}

.news-content p {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.news-meta {
  display: flex;
  gap: 16px;
  color: var(--text-light);
  font-size: 14px;
}

.news-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}
</style> 